<template>
    <div class="main-header">
        <div class="main-header-logo" :style="{ 'background-color': lighterColor}"><img style="width: 100%;height: 90%" src="http://erp.idosp.net/idosp/images/icon.jpg"/></div>
        <div class="main-header-options" :style="{ 'background-color': darkColor}" :element-loading-background="darkColor" v-loading="isMainHeaderLoading">
            <div class="main-header-buttons">
                <el-tooltip effect="dark" content="切换全屏">
                    <i class="fa fa-arrows-alt" aria-hidden="true" :style="{'font-size': '20px'}" @click="handleWindowFullScreenClick()"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="刷新">
                    <i class="fa fa-refresh" aria-hidden="true" :style="{'font-size': '20px'}" @click="handleRefreshClick()"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="登出">
                    <i class="fa fa-sign-out" aria-hidden="true" @click="handleLogoutClick()"></i>
                </el-tooltip>
            </div>
            <div class="main-header-labels" v-if="userData">
                <div class="main-header-label">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <div class="main-header-title">{{userData.NAME}}</div>
                </div>
<!--                <div class="main-header-label">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <div class="main-header-title">{{userData.ROLE_ID}}</div>
                </div>-->
            </div>
        </div>
    </div>
</template>

<script>
import api from 'api'
import { mapState } from 'vuex'
import { changeWindowFullScreen } from 'util'

export default {
    name: 'MainHeader',
    data () {
        return {
            isMainHeaderLoading: false, // 加载 - MainHeader
            isWindowFullScreen: false,  // 是否全屏
        }
    },
    computed: {
        ...mapState({
            darkColor: state => state.configCommon.darkColor,  // 深色调
            lighterColor: state => state.configCommon.lighterColor,  // 较浅色调
            userData: state => state.main.userData  // 用户数据
        })
    },
    methods: {
        // 处理点击切换全屏
        handleWindowFullScreenClick() {
            this.isWindowFullScreen = changeWindowFullScreen(this.isWindowFullScreen)
        },
        // 处理点击刷新
        handleRefreshClick() {
            this.$router.replace({path: 'Refreshing'})
        },
        // 处理点击登出
        handleLogoutClick() {
            this.$emit('handleLogoutClick')
        }
    }
}
</script>

<style scoped>
.main-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
}
.main-header-logo {
    width: 200px;
    height: 100%;
    color: #ffffff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center
}
.main-header-options {
    flex: 1
}
.main-header-buttons {
    height: 100%;
    display: flex
}
.main-header-buttons i {
    height: 100%;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    margin-left: 20px;
    display: flex;
    align-items: center
}
.main-header-buttons i:last-child {
    margin-right: 20px
}
.main-header-options {
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}
.main-header-labels {
    height: 100%;
    display: flex;
    align-items: center
}
.main-header-label {
    height: 100%;
    margin-right: 10px;
    display: flex;
    align-items: center
}
.main-header-label:last-child {
    margin-right: 20px
}
.main-header-label i {
    height: 100%;
    color: #ffffff;
    font-size: 18px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    position: relative;
    top: 1px
}
.main-header-title {
    height: 100%;
    color: #ffffff;
    font-size: 14px;
    margin-left: 10px;
    display: flex;
    align-items: center
}
</style>
